<template>

  <div class="tyfp-content-bottom">
    <CustomTimeline v-if="isasda" ref="customTimelineRef" :viewer="asdasd" />

    <div style="position: absolute; top:-100px">
      <el-button @click="AnimationStart">AnimationStart</el-button>
      <el-button @click="AnimationStop">AnimationStop</el-button>
      <el-button @click="AnimationSeep">AnimationSeep</el-button>
      <el-button @click="JumpToTime">JumpToTime</el-button>
      <!-- <el-button @click="HighlightPeriod">HighlightPeriod</el-button> -->
      <el-button @click="SetTimelineRange">SetTimelineRange</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomTimeline from "@/components/CustomTimeline.vue"

const customTimelineRef = ref(null)

const AnimationStart = () => {
  if (window.viewer) {
    window.viewer.clock.shouldAnimate = true;
    console.log('Animation started');
  }
}

const AnimationStop = () => {
  if (window.viewer) {
    window.viewer.clock.shouldAnimate = false;
    console.log('Animation stopped');
  }
}

const AnimationSeep = () => {
  if (window.viewer) {
    window.viewer.clock.multiplier = 100.0; // 10倍速播放
    console.log('Animation speed set to 10x');
  }
}

const JumpToTime = () => {
  if (window.viewer) {
    // 计算一个未来的时间点（当前时间+1小时）
    const currentTime = window.viewer.clock.currentTime
    const jumpTime = Cesium.JulianDate.addHours(currentTime, 1, new Cesium.JulianDate())

    // 设置时间轴跳转到该时间点
    window.viewer.clock.currentTime = jumpTime

    console.log('Jumped to time:', jumpTime)
  }
}

const HighlightPeriod = () => {
  if (window.viewer && customTimelineRef.value) {
    // 获取当前时间
    const currentTime = window.viewer.clock.currentTime

    // 计算开始和结束时间（当前时间前后各30分钟）
    const startTime = Cesium.JulianDate.addMinutes(currentTime, -30, new Cesium.JulianDate())
    const endTime = Cesium.JulianDate.addMinutes(currentTime, 30, new Cesium.JulianDate())

    // 在时间轴上添加高亮时间段
    const highlightRange = customTimelineRef.value.addHighlightRange('rgba(255, 255, 0, 0.5)', 20, {
      start: startTime,
      stop: endTime
    })

    console.log('Highlighting period from', startTime, 'to', endTime)
  }
}

// 使用setTimelineRange方法设置时间轴显示范围
const SetTimelineRange = () => {
  if (window.viewer && customTimelineRef.value) {
    // 输出viewer.clock的详细信息
    console.log('Viewer clock info:', {
      startTime: window.viewer.clock.startTime,
      stopTime: window.viewer.clock.stopTime,
      currentTime: window.viewer.clock.currentTime,
      clockRange: window.viewer.clock.clockRange,
      multiplier: window.viewer.clock.multiplier,
      shouldAnimate: window.viewer.clock.shouldAnimate
    });
    
    // 格式化viewer.clock的时间显示
    const formattedClockStart = formatJulianDate(window.viewer.clock.startTime);
    const formattedClockStop = formatJulianDate(window.viewer.clock.stopTime);
    const formattedClockCurrent = formatJulianDate(window.viewer.clock.currentTime);
    console.log('Viewer clock times: start =', formattedClockStart, ', stop =', formattedClockStop, ', current =', formattedClockCurrent);
    
    // 计算开始和结束时间（当前时间前后各1小时）
    const currentTime = window.viewer.clock.currentTime
    console.log('Current time (Julian):', currentTime);
    
    // 格式化当前时间显示
    const formattedCurrentTime = formatJulianDate(currentTime);
    console.log('Current time (formatted):', formattedCurrentTime);
    
    const startTime = Cesium.JulianDate.addHours(currentTime, -1, new Cesium.JulianDate())
    const endTime = Cesium.JulianDate.addHours(currentTime, 1, new Cesium.JulianDate())   
    
    // 格式化开始和结束时间显示
    const formattedStartTime = formatJulianDate(startTime);
    const formattedEndTime = formatJulianDate(endTime);
    console.log('Setting timeline range from', formattedStartTime, 'to', formattedEndTime);
    
    // 调用CustomTimeline组件的setTimelineRange方法
    customTimelineRef.value.setTimelineRange(startTime, endTime)

    console.log('Set timeline range from', startTime, 'to', endTime)
  }
}

// 格式化Julian日期为易读的字符串
const formatJulianDate = (julianDate) => {
  if (!julianDate) return ''

  const gregorianDate = Cesium.JulianDate.toGregorianDate(julianDate)
  
  // 考虑时区偏移
  const timezoneOffset = new Date().getTimezoneOffset() * 60; // 获取本地时区偏移（秒）
  const adjustedHour = gregorianDate.hour - (timezoneOffset / 3600); // 调整小时
  
  const year = gregorianDate.year
  const month = String(gregorianDate.month).padStart(2, '0')
  const day = String(gregorianDate.day).padStart(2, '0')
  const hour = String(Math.floor(adjustedHour + 24) % 24).padStart(2, '0') // 确保小时在0-23范围内
  const minute = String(gregorianDate.minute).padStart(2, '0')
  const second = String(gregorianDate.second).padStart(2, '0')

  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

const asdasd = ref()
const isasda = ref(false)

onMounted(() => {
  // 确保Cesium已初始化
  setTimeout(() => {
    isasda.value = true
    asdasd.value = window.viewer


  }, 2000)
})

</script>

<style lang="less" scoped>
.tyfp-content-bottom {
  position: absolute;
  width: 900px;
  height: 110px;
  left: 485px;
  z-index: 3;
  text-align: center;
  line-height: 110px;
  bottom: 30px;
  // background: #152156 0.2;
  // background: red;
  border-radius: 18px;

  backdrop-filter: blur(3px);
}
</style>